<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <script src="/libs/requirejs/require.min.js" data-main="/js/detail"></script>
    <title>商品详情</title>
</head>
<body>
    <!-- 搜索框 -->
    <div class="nav">
        <div class="nav-mid">
            <a href="../index.html">
                <img src="../img/tbw.png" alt="">
            </a>
            <div class="search">
                <div class="search-input">
                    <input type="text">
                </div>
                <div class="search-button">
                    <button>搜淘宝</button>
                    <button>搜本店</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 渲染区域 -->
    <div class="main">
        <!-- 标题 -->
        <div class="banner">
            <div class="shopName">
                <h4>店家名字</h4>
            </div>
            <div class="shopNav">
                <p>店家导航</p>
            </div>
        </div>
        <!-- 详情内容 -->
        <div class="detail">
            <div class="detail-l">
                <div class="detail-img">
                    <div class="img-box">
                        <!-- 放大镜 -->
                        <script type="text/html" id="photo-template">
             
                            <div class="img" >
                                <img src="{{photos[0].url}}" data-zoom-image="{{photos[0].url}}" class="small-image" />
                            </div>
                                <div id="gallery" class="imgList">
                                {{each photos photo}}
                                    <a href="#" data-zoom-image="{{photo.url}}" data-image="{{photo.url}}">
                                        <img class="thumb-image" src="{{photo.url}}" alt="">
                                    </a>
                                {{/each}}
                                </div>
                       
                        </script>
                    </div>

                    <div class="shoucang">
                        <script type="text/html" id="sc-template">
                            <a href="#">收藏宝贝<span>（{{details.saleNum}}人气）</span></a>
                        </script>
                    </div>
                </div>
                <div class="detail-msg">
                    <div class="msg-con">
                            <div class="shopName">
                                <script type="text/html" id="title-template">
                                    <p class="title">{{details.title}}</p>
                                </script>
                            </div>
                       
                            <ul class="price">
                                <script type="text/html" id="price-template">
                                <li>
                                    <span>价格</span>
                                    <i class="sc">￥{{details.originPrice}}</i>
                                </li>
                                <li class="tbj">
                                    <span>淘宝价</span>
                                    <i class="tbjPrice">￥{{details.price}}</i>
                                    <em>优惠价</em>
                                </li>
                                <li class='tbb'>
                                    <span>优惠</span>
                                    <i>淘宝币可抵 <em>{{details.originPrice/100}}</em> 元</i>
                                </li>
                                <li class="jiaoyi">
                                    <div class="lj">
                                        <a href="">
                                            <p>{{details.saleNum-1000}}</p>
                                            <p>累计评价</p>
                                        </a>
                                    </div>
                                    <div class="jy">
                                        <p>{{details.saleNum}}</p>
                                        <p>交易成功</p>
                                    </div>
                                </li>
                            </script>
                            </ul>
                        
                            <div class="ps">
                                <div class="sp">配送</div>
                                <div>
                                    <div class="location">
                                        <span>浙江宁波</span>
                                        至
                                        <i style="font-style: normal;">四川成都武侯区</i>
                                    </div>
                                    <div>快递 免运费</div>
                                </div>
                            </div>
                            <div class="goumai ">
                                <div>
                                    <span style="margin-top: 10px;float: left;width: 55px;height: 18px;margin-right: 5px;">颜色分类</span>
                                     <ul class="ysfl">
                                        <script type="text/html" id="fenlei-template">
                                            {{each photos prod}}
                                            <input class="id" type="hidden" value="{{prod.id}}">
                                             <li class="ysfl-itme">
                            
                                                <img src="{{prod.url}}" alt="">
                                            </li>
                                            {{/each}}
                                        </script> 
                                       
                                        <!-- <li>
                                            <img src="https://img.alicdn.com/imgextra/i3/66750467/O1CN011FJvQ8mEqc5F7CQ_!!66750467.jpg_400x400.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="https://img.alicdn.com/imgextra/i3/66750467/O1CN011FJvQ8mEqc5F7CQ_!!66750467.jpg_400x400.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="https://img.alicdn.com/imgextra/i3/66750467/O1CN011FJvQ8mEqc5F7CQ_!!66750467.jpg_400x400.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="https://img.alicdn.com/imgextra/i3/66750467/O1CN011FJvQ8mEqc5F7CQ_!!66750467.jpg_400x400.jpg" alt="">
                                        </li>
                                        <li>
                                            <img src="https://img.alicdn.com/imgextra/i3/66750467/O1CN011FJvQ8mEqc5F7CQ_!!66750467.jpg_400x400.jpg" alt="">
                                        </li> -->
                                    </ul>
                                </div>
                               
                                <div class="amount">
                                    <span style="float: left; width: 55px;height: 28px; line-height: 28px;">数量</span>
                                    <div class="add">
                                        <button class="minus" >-</button>
                                        <input class="amount" type="text" value="1">
                                        <button class="plus">+</button>
                                        <i>件(库存524件)</i>
                                    </div>
                                </div>
                                <div class="gm">
                                    <button class="ljgm">立即购买</button>
                                    <button class="jrgwc"> <i class="iconfont icon-gouwuche"></i> 加入购物车</button>
                                    <button class="flgm">返利购买</button>
                                </div>
                            </div>                        
                    </div>
                </div>
            </div>
            <div class="detail-r">
                
            </div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="cbl">
        <ul>
            <li class="kf">
                <i class="iconfont icon-weibo"></i>
                <div>客服</div> 
            </li>
            <li class="gwc">
                <a href="/html/cart.html">
                    <i class="iconfont icon-gouwuche"></i>
                    <div>购物车</div>
                    <div class="gwcNum">0</div>
                    <div class="myGwc">我的购物车</div>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>